<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<link rel='stylesheet' type='text/css' href='./css/basestyle.css' />
		<link rel='stylesheet' type='text/css' href='./css/headfoot.css'/>
		<script src='js/base.js'></script>
	</head>
	<body>
		<div id='pc-header' class='hidden-xs'>
			<div id='head'>
				<div ref='tippopup' style='display:block'>
					<div class='head_nav'>
						<div class='headmid'>
							<!-- 中间的导航 -->
							<div class='headnav' v-show='nav==1'>
								<ul>
									<a href='index.html?num=0' >
										<li class='headtitle' @click='changestatusbtn(num)':class='{head_active :changestatus==0}'>
											<p>首页</p>
										</li>
									</a>
									<a href='jingsaicenter.html?num=1' >
										<li class='headtitle' @click='changestatusbtn(num)':class='{head_active :changestatus==1}'>
											<p>竞赛中心</p>
										</li>
									</a>
									<a href='fabu.html?num=2'>
										<li class='headtitle' @click='changestatusbtn(num)':class='{head_active :changestatus==2}'>
											<p>我要发布</p>
										</li>
									</a>
									<a href='workstrack.html?num=3'>
										<li class='headtitle' @click='changestatusbtn(num)':class='{head_active :changestatus==3}'>
											<p>作品追踪</p>
										</li>
									</a>

									<div class='headri'>
										<div class='headrinav'>
											<div class='headri_search headri_item' @click='opensearch' v-show='nav==1'>
												<img class='headri_search_img' src='images/search_icon.png'>
											</div>
											<div class='headri_lang headri_item' @click='changelanguage'>
												<p>EN/中文</p>
											</div>
											<a href='personalcenter.html'>
												<div class='headri_user headri_item' v-show='loginstatus == 1'>
													<div class='headri_userle headri_useritem'>
															<img class='headri_user_img' :src='icon'>
													</div>
													<div class='headri_userri headri_useritem'>
														<p class='headri_user_txt'>{{username}}</p>
													</div>
												<div class='headri_userri headri_useritem headri_out' @click.stop='loginout'>
													<p class='headri_user_txt'>登出</p>
												</div>
													<div class='clear'></div>
												</div>
											</a>
											<div class='headri_user headri_item' v-show='loginstatus == 0'>	
												<div class='headri_userle headri_useritem'>
													<img class='headri_user_img' src='./images/per_icon.png'>
												</div>
												<div class='headri_userri headri_useritem' @click='loginuser'>
													<p class='headri_user_txt'>登录/注册</p>
												</div>
												<div class='clear'></div>
											</div>
										</div>
									</div>
									<div class='clear'></div >
								</ul>
							</div>
							<!-- 中间的导航英文 -->
							
							<!-- 搜索 -->
							<div class='search' v-show='nav==2'>
								<div class='searchtype'>
									<div class='searchtypereference'>
										<p @click='openlist'>{{typesearch0}}</p>
										<div class='searchtypenav' v-show='typePage == 1'>
											<div class='searchtypewarp'>
												<p v-for='(item,index) in typesearch' @click='changsearch(index)'>{{item.name}}</p>
											</div>
										</div>
									</div>
								</div>
								
								<div class='searchclose' @click='closesearch'>
									<img src='./images/head_close.png'>
								</div>
								<div class='searchwarp'>
									<input v-model='searchcontent' class='searchnav' type='text' @focus='focusing' />
								</div>
								<div class='searchstart' @click='headseach'>
									<img src='images/search_icon.png'>
								</div>
								
								<div class='headbg' v-show='seachopen && this.usersearch.length >0'>
									<div class='headnavbg' @click='defocusing'></div>
									<div class='searchrecord'>
										<div class='searchrecordnav' v-for='(item ,index) in usersearch' :key='index' @click='movevalue(index)'>
											<p>{{item.content}}</p>
										</div>
									</div>
								</div>
								<!-- 提示弹窗 -->
								<div class='judgepopup'v-if='tanchuang1 != 0'>
									<div class='judgepopupnav'>
										<div class='judgepopupwarp'>
											<div class='judgepopupwarpup'>
												<img src='./images/revoke_logo.png'>
											</div>
											<div class='judgepopupwarpdown'>
												<div class='judgepopupwarptxt'>
													<p v-if='tipcontent == 1'>请选择搜索类型</p>
													<p v-else-if='tipcontent == 2'>请输入搜索内容</p>
												</div>
												<div class='judgepopupwarpbtn'>
													<div class='judgepopupwarpbtnitem judgepopupwarpbtnactive' @click='closeagreement'>
														<p>确认</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--  -->
						<div class='judgepopup'v-show='tanchuang2==1'>
							<div class='judgepopupnav'>
								<div class='judgepopupwarp'>
									<div class='judgepopupwarpup'>
										<img src='./images/revoke_logo.png'>
									</div>
									<div class='judgepopupwarpdown'>
										<div class='judgepopupwarptxt'>
											<p>用户失效，请重新输入</p>
										</div>
										<div class='judgepopupwarpbtn'>
											<div class='judgepopupwarpbtnitem judgepopupwarpbtnactive' @click='openlogin'>
												<p>确认</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 登录注册 -->
						<div id='sign' v-if='num==1'>
							<div class='signnav'>
								<!-- 登录 -->
								<div class='signcontent' v-if='page ==1'>
									<div class='signcontentup'>
										<img src='./images/pay_icon.png'>
										<div class='signcontentupclose' @click='closelogin'>
											<img src='./images/close_icon.png'>
										</div>
									</div>
									<div class='signcontentdown'>
										<div class='signcontentdownchoose'>
											<div class='signcontentdownchoosetitle' >
												<div class='signcontentdownchoitemosetitleitem'>
													<p>密码登录</p>
												</div>
											</div>
											<div class='signcontentdownchooseipt' v-if='type == 1'>
												<div class='signcontentdownchooseiptitem'>
													<input  v-model='loginphone' type='text' placeholder='请输入手机号' />
												</div>
												<div class='signcontentdownchooseiptitem'>
													<input  v-model='loginpassword' type='password' placeholder='请输入密码' />
												</div>
											</div>
										</div>
										<div v-if='loginstatuscode == 1' class=''>
											<p>账号或密码错误</p>
										</div>
										<div class='signcontentdownbtn' @click='headlogin'>
											<p>登录</p>
										</div>
										<div class='loginthing'>
											<div class='signcontentdownzhuce' @click='openzhuce'>
												<span>免费注册</span>
											</div>
										</div>
									</div>
								</div>
								<!-- 注册 -->
								<div class='register' v-else-if='page ==2'>
									<div class='signcontentup'>
										<img src='./images/pay_icon.png'>
										<div class='signcontentupclose' @click='closezhuce'>
											<img src='./images/close_icon.png'>
										</div>
									</div>
									<div class='registerdown'>
										<div class='registerdowntxt'>
											<p >注册账号</p>
										</div>
										<div class='registerdownipt'>
											<div class='registerdowniptnav'>
												<input  v-model='zucephone' type='text' placeholder='请输入手机号' />
											</div>
											<div class=''>
												<p v-if='phonecode == 1'>手机号格式不正确</p>
											</div>
											<div class='registerdowniptnav'>
												<input v-model='zhucepassword' type='password' placeholder='密码长度8-16位,数字,字母或下划线组成 '/>
											</div>
											<div class='registerdowniptnav'>
												<input v-model='zhucemakesurepassword' type='password' placeholder='请再次输入密码' />
											</div>
											<div v-show='judgepassword == 2' class='registerdowniptnavtip'>
												<p v-html='zhucetip'></p>
											</div>
											<div class='registerdowniptnavtip' v-show='judgepassword == 1'>
												<p >两次密码输入不正确</p>
											</div>
										</div>
										<div class='registerdownbtn' @click='headzhuce'>
											<p>注册</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src='https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js'></script>
		<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
		 <script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>
		<script type='text/javascript'>
			let head = new Vue({
				el: '#head',
				data: {
					typesearch0:'请选择类型',
					typesearch:[
						{
							name:'竞赛',
							id:1
						},
						{
							name:'追踪',
							id:2
						},
					],
				// 	tip:false,
				// 	tipmes:'',
					judgepassword:0,  //注册提示判断
					zhucetip:'',  //注册错误提示
					tipcontent:0,
					typePage:0,
					username: '',
					icon: '',
				// 	headPortrait: './images/touxiang.png',
				// 	getCode: true,
				// 	logingetCode: true,
				// 	count: '',
				// 	logincount: '',
					num: 0,  //登录判断
					judgepage:1,
					nav:1,
					type: 1,
					page: 1,
					seachopen: false,
				// 	password: 0,
					phonecode: 0,  //手机号格式
				// 	phonecodelogin: 0,
				// 	logintype: 0,
					loginstatuscode: 0,
					loginstatus: 0,
				// 	searrchlist: [],
					loginphone: '',  //手机号
					loginpassword: '',  //密码
				// 	loginphonecode: '',
				// 	logincode: '',
					zucephone: '',  //注册手机号
				// 	zhucecode: '',
					zhucepassword: '',  //注册密码
					zhucemakesurepassword: '',  //注册确定密码
					searchcontent:'',  //搜索内容
				// 	userid:'',
				// 	token:'',
					usersearch:[],
				// 	recordcontent:'',
					typeid:0,
					tanchuang1:0,
					tanchuang2:0,  //登录失效，重新登陆弹窗
				// 	tanchuang3:0,
					changestatus:0,
				// 	changelanguagestatus:true,
				// 	languagestatus:1,
				// 	winWidth:'',
				// 	sidewidth:'',
				// 	midwidth:'',
				// 	xieyithing:'',
				// 	xieyithingE:'',
				// 	forgetuserid:'',
				},
				created() {
					let that = this
					if(!sessionStorage.getItem('languagestatus')) {
						//缓存语言
						sessionStorage.setItem('languagestatus', 1);
					}
					if(!sessionStorage.getItem('typeid')) {
						//竞赛类型
						sessionStorage.setItem('typeid', 0);
					}
					if(!sessionStorage.getItem('content')) {
						//搜索内容
						sessionStorage.setItem('content', '');
					}
					if(sessionStorage.getItem('loginpage')) {
						//登录页面
						that.num = sessionStorage.getItem('loginpage');
					}
					if (localStorage.getItem('logininfo')) {
						let obj = JSON.parse(localStorage.getItem('logininfo'));
						if(obj.token != ''){
							that.loginstatus = 1
						}
						if(obj.token == ''){
							that.loginstatus = 0
						}
						that.userid = obj.userid
						that.token = obj.token
					}
				},
				mounted() {
					let that = this
				// 	that.getwidth()
					that.getlogining() //登陆状态判断
					if(sessionStorage.getItem('typeid')) {
						//竞赛类型
						that.typeid = sessionStorage.getItem('typeid')
						if(that.typeid==1){
							that.typesearch0='竞赛'
						}else if(that.typeid==2){
							that.typesearch0='追踪'
						}else if(that.typeid==0){
							that.typesearch0='请选择类型'
						}
					}
					if (sessionStorage.getItem('languagestatus')) {
						that.languagestatus = sessionStorage.getItem('languagestatus')
					}
					if(sessionStorage.getItem('content')) {
						//搜索内容
						that.searchcontent= sessionStorage.getItem('content');
					}
					if (localStorage.getItem('userinfo')) {
						let obj = JSON.parse(localStorage.getItem('userinfo'));
						that.username = obj.nickname
						that.icon = obj.avatar
					}
					if(location.pathname.indexOf('search') != -1) {
						that.nav = 2
					}else {
						that.nav = 1
					}
					var theRequest = new Object()
					var url = location.search
					if (url.indexOf('?') != -1) {
						var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；  
						var strs = str.split('&');
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split('=')[0]] = (strs[i].split('=')[1]);
						}
						that.changestatus = theRequest.num  //导航判断
					}
					this.$refs.tippopup.style.display = 'block'
				},
				destroyed() {
					
				},
				methods: {
 					//判断登陆状态
					getlogining:function(){
						let that = this
						if(that.token !='' ){
							axios.post('http://127.0.0.1:8080/api/bishe.basics/islogin',{
								userid:that.userid,
								token:that.token
							})
							.then((res) =>{
								if(res.data.code == 2){
								console.log(res,'我是检查登陆状态')
									if (localStorage.getItem('logininfo')) {
										let obj = JSON.parse(localStorage.getItem('logininfo'))
										that.userid = obj.userid = ''
										that.token = obj.token = ''
										obj = JSON.stringify(obj)
										localStorage.setItem('logininfo', obj)
										that.loginstatus = 0
										that.tanchuang2 = 1
									}
								}
							})
						}
					},
					//登出
					loginout:function(){
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.login/exited',{
							params:{
								userid:that.userid,
							}
						})
						.then((res) =>{
							if(res.data.code == 1){
							}
						})
					},
// 					// 重新登陆
					openlogin:function(){
						this.num = 1
						this.tanchuang2 = 0
					},
// 					// 打开搜索框
					opensearch: function() {
						this.nav = 2
						this.getsearrchlist()
					},
 					// 关闭搜索框
					closesearch: function() {
						this.nav = 1
						this.typesearch0 = '请选择类型',
						this.searchcontent = ''
						sessionStorage.setItem('typeid',0);
					},
 					// input聚焦事件
					focusing: function() {
						this.seachopen = true
					},
					// input失焦事件
					defocusing: function() {
						this.seachopen = false
					},
 					// 打开列表
					openlist:function(){
						let that = this
						that.typePage = 1
					},
 					// 选择类型
					changsearch:function(i){
						let that = this
						that.typesearch0 = that.typesearch[i].name
						that.typeid = that.typesearch[i].id
						that.typePage = 0
						sessionStorage.setItem('typeid',that.typeid);
					},
 					// 填入输入框 跳转页面
					movevalue:function(i){
						let that = this
						if(that.typeid == 0){
							that.tipcontent = 1
							that.tanchuang1 = 1
							that.seachopen = false
						}else{
							that.searchcontent = that.usersearch [i].content
							if(that.typeid == 1){
								axios.get('http://127.0.0.1:8080/api/bishe.index/competitionSearch',{
									params:{
										userid:that.userid,
										token:that.token,
										text:that.searchcontent,
										page:''
									}
								})
								.then((res) =>{
									if(res.data.code == 1){
										window.location.href = 'search.html'
										sessionStorage.setItem('content', that.searchcontent);
									}
								})
							}else if(that.typeid == 2){
								axios.get('http://127.0.0.1:8080/api/bishe.index/trackSearch',{
									params:{
										userid:that.userid,
										token:that.token,
										text:that.searchcontent,
										page:''
									}
								})
								.then((res) =>{
									if(res.data.code == 1){
										window.location.href = 'search.html'
										sessionStorage.setItem('content', that.searchcontent);
									}
								})
							}
						}
					},
 					// 搜索
					headseach: function() {
						let that = this
						console.log(this.judgepage)
						if(that.typeid != 0 && that.searchcontent != ''){
							if(that.typeid == 1){
								axios.get('http://127.0.0.1:8080/api/bishe.index/competitionSearch',{
									params:{
										userid:that.userid,
										token:that.token,
										text:that.searchcontent,
										page:''
									}
								})
								.then((res) =>{
									that.nav = 2
									if(res.data.code == 1){
										window.location.href = 'search.html'
										sessionStorage.setItem('content', that.searchcontent);
									}
								})
							}
							else if(that.typeid == 2){
								axios.get('http://127.0.0.1:8080/api/bishe.index/trackSearch',{
									params:{
										userid:that.userid,
										token:that.token,
										text:that.searchcontent,
										page:''
									}
								})
								.then((res) =>{
									if(res.data.code == 1){
										window.location.href = 'search.html'
										sessionStorage.setItem('content', that.searchcontent);
									}
								})
							}
						}
						if(that.typeid == 0){
							that.tipcontent = 1
							that.tanchuang1 = 1
							that.seachopen = false
						}
						if(that.searchcontent == ''){
							that.tipcontent = 2
							that.tanchuang1 = 1
							that.seachopen = false
						}
					},
 					// 关闭弹出
					closeagreement:function(){
						let that = this
						that.tanchuang1 = 0
					},
					loginuser: function() {
						let that = this
						that.num = 1
					},
 					//注册
					openzhuce: function() {
						let that = this
						that.page = 2
					},

					//关闭登录页
					closelogin: function() {
						let that = this
						that.num = 0
						sessionStorage.setItem('loginpage',0)
					},
 					//关闭注册页
					closezhuce: function() {
						let that = this
						that.page = 1
					},
 					//关闭注册页
					closeforget: function() {
						let that = this
						that.page = 1
					},
					// 搜索历史
					getsearrchlist: function() {
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.index/searchList', {
								params:{
									userid: that.userid,
									token: that.token
								}
							})
							.then((res) => {
								if(res.data.code == 1){
									that.usersearch = res.data.data.usersearch
								}
								console.log(res)
							})
					},
					// 确定登录
					headlogin: function() {
						// 账号登陆
						let that = this
						axios.post('http://127.0.0.1:8080/api/bishe.login/login', {
							mobile: that.loginphone,
							password: that.loginpassword
						})
						.then((res) => {
							that.loginphone = ''
							that.loginpassword = ''
							console.log(res,'我是用戶信息')
							if (res.data.code == 1) {
								that.num = 0
								that.loginstatus = 1;
								that.username = res.data.data.nickname
								//缓存id,token
								let loginObj = new Object
								loginObj.userid = res.data.data.userid
								loginObj.token = res.data.data.token
								loginObj = JSON.stringify(loginObj)
								localStorage.setItem('logininfo', loginObj);
								//缓存nickname,avatar
								let userObj = new Object
								userObj.nickname = res.data.data.nickname
								userObj.avatar = res.data.data.avatar
								userObj = JSON.stringify(userObj)
								localStorage.setItem('userinfo', userObj);
								if (localStorage.getItem('userinfo')) {
									let obj = JSON.parse(localStorage.getItem('userinfo'));
									that.username = obj.nickname
									that.icon = obj.avatar
								}

								if (localStorage.getItem('logininfo')) {
									let obj = JSON.parse(localStorage.getItem('logininfo'));
									that.userid = obj.userid
									that.token = obj.token
								}
								console.log('登陆刷新')
								location.reload()
								sessionStorage.setItem('loginpage',0)
							} else if (res.data.code == 0) {
								that.loginstatuscode = 1
								setTimeout(function() {
									that.loginstatuscode = 0
								}, 1300)
							}
						})
					},
					// 确定注册
					headzhuce: function() {
						console.log(111)
						let that = this
						if(that.zhucepassword != that.zhucemakesurepassword){
							that.judgepassword = 1
							setTimeout(function(){
								that.judgepassword = 0
							},1300)
							
						}else if(that.zhucemakesurepassword === that.zhucepassword){
							axios.post('http://127.0.0.1:8080/api/bishe.login/register', {
									mobile: that.zucephone,
									code: that.zhucecode,
									type: 0,
									password: that.zhucepassword,
									password1: that.zhucemakesurepassword,
									languagestatus: that.languagestatus
								})
							.then((res) => {
								console.log(res)
								if (res.data.code == 1) {
									that.judgepassword = 2
									that.zhucetip = res.data.msg
									setTimeout(function(){
										that.zucephone =''
										that.zhucecode = ''
										that.zhucepassword =''
										that.zhucemakesurepassword =''
										that.judgepassword = 0
										that.page = 1
										that.num = 0
										that.loginstatus = 1;
										that.username = res.data.data.nickname
										//缓存id,token
										let loginObj = new Object
										loginObj.userid = res.data.data.userid
										loginObj.token = res.data.data.token
										loginObj = JSON.stringify(loginObj)
										localStorage.setItem('logininfo', loginObj);

										//缓存nickname,avatar
										let userObj = new Object
										userObj.nickname = res.data.data.nickname
										userObj.avatar = res.data.data.avatar
										userObj = JSON.stringify(userObj)
										localStorage.setItem('userinfo', userObj);

										if (localStorage.getItem('userinfo')) {
										let obj = JSON.parse(localStorage.getItem('userinfo'));
										that.username = obj.nickname
										that.icon = obj.avatar
										}

										if (localStorage.getItem('logininfo')) {
										let obj = JSON.parse(localStorage.getItem('logininfo'));
										that.userid = obj.userid
										that.token = obj.token
										}
										location.reload()
									},1300)
								}else if(res.data.code == 0){
									that.judgepassword = 2
									that.zhucetip = res.data.msg
									setTimeout(function(){
										that.judgepassword = 0
									},1300)
								}
							})
						}
					},
					// 切换页面
					changestatusbtn:function(num){
						let that = this
						that.changestatus = num
					},
 					// 切换语言
					changelanguage:function(){
						alert('此功能正在开发')
					},
				}
			})
		</script>
	</body>
</html>
